<template>
  <div style="width: 100%;height: 5000px">
    <div class="top" style="float: left;">
      <div class="search">
        <el-input  v-model="input" placeholder="搜索你想要的内容" style="width: 300px;"></el-input>
        <el-button type="warning" round @click="onSubmit()">搜索</el-button>
      </div>
      <div class="pic2">
        <div>
          <div class="pic21">
            <img src="http://qoz3190o1.hd-bkt.clouddn.com/src%3Dhttp___bpic.588ku.com_element_origin_min_pic_00_91_84_2256f1844a88731.jpg%26refer%3Dhttp___bpic.588ku.jpg"/>
            <div class="pic22">上传视频</div>
          </div>
        </div>
        <div>
          <div class="pic21">
            <img src="http://qoz3190o1.hd-bkt.clouddn.com/u%3D1091995538%2C4097802728%26fm%3D26%26gp%3D0.jpg"/>
            <div class="pic22">充值抖币</div>
          </div>
        </div>
        <div >
          <div class="pic21" @mouseover="showpic()" @mouseleave="showpic2()">
            <img src="http://qoz3190o1.hd-bkt.clouddn.com/u%3D1416799284%2C860429581%26fm%3D26%26gp%3D0.jpg"/>
            <div  class="pic22">用户</div>
            <div class="pic22"></div>
          </div>
        </div>
      </div>

    </div>

    <div class="pic1">
      <!--http://qoz3190o1.hd-bkt.clouddn.com/logo.jpg-->
      <img src="http://qoz3190o1.hd-bkt.clouddn.com/logo.jpg"/>
      <div class="pic22"></div>
    </div>
    <div class="row6">
      <div class="row8">
        <li v-for="(iteam,index) in videos" class="row521">
          <div class="row52111">
            <video controls class="vjs-custom-skin">
              <source type="video/mp4"
                      :src="iteam.videoUrl"/>
            </video>
            <div class="row52112">{{iteam.videoInfo}}</div>
            <div>
              <div class="row521121">{{iteam.videoHot}}</div>
              <div class="row521122">喜欢:</div>
            </div>
          </div>
        </li>
      </div>
    </div>

    <div class="row7" style="display:none" >
      <div class="row71">
        <div class="row711">
          <img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"/>
          <!--<el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>-->
        </div>
        <div class="row713"></div>
        <div class="row712">昵称</div>
        <div class="row713"></div>
        <div class="row712">邮箱</div>
      </div>
      <div class="row72">

      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    name: "search",
    data() {
      return {
        input: '',
        videos: []
      }
    },
    methods:{

    },
    mounted() {
      alert(this.$route.query.name)
    }
  }
</script>

<style scoped>
  .search{
    width: 500px;
    height: 50px;
    margin: auto;
  }
  .pic1{
    width: 100%;
    height: 390px;
    position: absolute;
  }
  .pic1 img{
    width: 100%;
    height: 390px;
    float: left;
  }
  .top{
    width: 100%;
    height:50px;
    position: absolute;
    z-index: 10;
  }
  .pic2{
    position: absolute;
    top: 0px;
    right: 30px;
    width: 270px;
    height: 90px;
    float: left;
  }
  .pic21{
    width: 90px;
    height: 90px;
    float: left;
  }
  .pic2 img{
    width: 35px;
    height: 35px;
  }
  .pic22{
    width: 90px;
    height: 30px;
    float: left;
    color: aqua;
  }
  .row8{
    width: 1500px;
    height: auto;
    margin: auto;
  }
  .row521{
    width: 300px;
    height: 600px;
    float: left;
  }
  .row52111{
    width: 280px;
    height: 500px;
    margin: auto;
  }
  .vjs-custom-skin{
    width: 280px;
    height: 500px;
  }
  .row52112{
    width: 280px;
    height: 60px;
    text-align: initial;
  }
  .row521121{
    width: 50px;
    float: right;
    height: 30px;
    line-height: 30px;
    color: chocolate;
  }
  .row521122{
    width: 70px;
    float: right;
    height: 30px;
    line-height: 30px;
    color: chocolate;
  }
  .row6{
    width: 100%;

    height: 70px;
    position: absolute;
    top: 1800px;
  }
  .row7{
    z-index: 10;
    background-color: antiquewhite;
    position: absolute;
    width: 500px;
    height: 300px;
    top: 80px;
    right: 30px;
    border-radius: 75px;
  }

  .row71{
    width: 500px;
    height: 150px;
  }
  .row72{
    width: 500px;
    height: 150px;
  }
  .row711{
    width: 150px;
    height: 150px;
    float: left;
  }
  .row711 img{
    width: 100px;
    height: 100px;
    margin-top: 25px;
    border-radius: 50px;
  }

  .row712{
    width: 100px;
    height: 30px;
    float: right;
    margin-top: 28px;
  }
  .row713{
    width: 250px;
    height: 30px;
    float: right;
    margin-top: 28px;
  }




  ::-webkit-scrollbar{
    width: 5px;
    height: 16px;
  }
  ::-webkit-scrollbar-track-piece{
    background: #abcdef;
    -webkit-border-radius: 6px;
  }
  /*修改垂直滚动条的样式*/
  ::-webkit-scrollbar-thumb:vertical{
    background-color: #ffffff;
    -webkit-border-radius: 6px;
  }

  /*修改水平滚动条的样式*/
  ::-webkit-scrollbar-thumb:horizontal{
    background-color: #faa;
    -webkit-border-radius: 6px;
  }


</style>
